<template>
  <div>
    <el-table ref="multipleTable" :data="tableData[0].data.slice((currentPage-1)*pagesize,currentPage*pagesize)" :stripe=true @selection-change="tableSelectionChange">
      <slot>
        <el-table-column type="selection" width="55">
        </el-table-column>
      </slot>
      <el-table-column
        v-for="(col,key) in tableData[0].cols"
        :prop="col.prop"
      :label="col.label"
      :key="key"
      >
      </el-table-column>
      <el-table-column v-if="isShow"
                       label="操作"
                       width="140">
        <template slot-scope="scope">
          <slot name="operate_txt" :todo="scope">
            <el-button @click="handleClick(scope,scope.row,scope.$index)" type="text" size="small">删除</el-button>
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-col :xs="24" :sm="24" :md="24" :lg="24" class="page">
      <slot name="batch_ban"></slot>
      <el-pagination class="page_bottom" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="tableData[0].data.length">
      </el-pagination>
    </el-col>
  </div>
</template>

<script>
  export default {
    name: 'filesTable',
    props:['tableData','isShow'],
    data () {
      return {
        del_id:[],
        currentPage:1,
        pagesize:10
      }
    },
    mounted(){
      console.log(this.del_id);
    },
    methods:{
      handleClick: function(scope,row,index){
        console.log(scope);
        console.log(row);
        console.log(index);
      },
      tableSelectionChange(val) {//tips:当用户手动选择table checkbox时触发
        this.del_id = val;
        this.$emit("del_data",this.del_id);
        console.log(this.del_id);
      },
      handleSizeChange(size) {
        this.pagesize = size;
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
      },
    }
  }
</script>
<!---->
<!-- Add "scoped" attribute to limit CSS to this component only-->
<style  scoped>
</style>
